<template>
	<view class="tabbar" :style="{'background':background}">
		<view class="tabItem" v-for="(item,index) in tabbarList" :key="index">
			<view class="tabItem-child" @click="bindPath(item,index)" :class="{'active':tabUserVal==index}">
				<image v-if="tabUserVal== index" class="icon" :src="item.icon_actve"></image>
				<image v-else class="icon" :src="item.icon"></image>
				<text class="text1">{{item.label}}</text>

				<image v-if="tabUserVal==index&& tabUserVal==0" class="top-icon" src="@/static/tabBar/tab-top.png">
				</image>
				<image v-if="tabUserVal==index&&tabUserVal== 1" class="top-icon" src="@/static/tabBar/tab-top2.png">
				</image>
				<image v-if="tabUserVal==index&&tabUserVal== 2" class="top-icon" src="@/static/tabBar/tab-top3.png">
				</image>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabbarList: [{
						label: '首页',
						value: 0,
						path: '/pages/index/index',
						icon: require('@/static/tabBar/tab-1.png'),
						icon_actve: require('@/static/tabBar/tab-1-active.png')
					},
					{
						label: '我在下庄',
						value: 1,
						path: '/pages/two/index',
						icon: require('@/static/tabBar/tab2-1.png'),
						icon_actve: require('@/static/tabBar/tab2.png')
					},
					{
						label: '我的',
						value: 2,
						path: '/pages/user/index',
						icon: require('@/static/tabBar/tab3-1.png'),
						icon_actve: require('@/static/tabBar/tab3.png')
					},
				],
				tabUserVal: null,


			}
		},
		props: {

			expertType: {
				type: [String, Number],
				default: 1
			},
			background: {
				type: String,
				default: '#96B296' // #BCB8B4
			}

		},
		components: {

		},
		onLoad(option) {

		},
		onShow() {

		},
		created() {
			this.tabUserVal = this.expertType

			console.log('当前值：', this.tabUserVal)
		},
		// watch: {
		// 	expertType(newVal, oldVal) {
		// 		console.log(`expertType 的值从 ${oldVal} 变为 ${newVal}`);
		// 		// 在这里执行需要的操作
		// 	}
		// },

		methods: {
			bindBack() {
				uni.navigateBack()
			},
			bindPath(item, index) {

				uni.redirectTo({
					url: item.path
				})
			}









		}
	}
</script>

<style lang="less" scoped>
	.tabbar {
		font-family: PingFang SC, PingFang SC;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #96B296;
		height: 100rpx;
		padding-bottom: env(safe-area-inset-bottom);
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 9;

		.tabItem {
			flex: 1;
			display: flex;
			justify-content: center;

			.tabItem-child {
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;

				.icon {
					width: 48rpx;
					height: 48rpx;
				}



				.text1 {
					font-weight: normal;
					font-size: 22rpx;
					color: #fff;
					margin-top: 8rpx;
				}

				.top-icon {
					width: 88rpx;
					height: 38rpx;
					position: absolute;
					top: -38rpx;
					left: 50%;
					transform: translate(-50%, 0);
				}

			}

			.active {
				.text1 {
					color: #313131 !important;
				}
			}

		}









		.colorRed {
			color: #FF2D2D !important;
		}

		.flex-s {}
	}
</style>